<template>
    <div class="course-detail">
        <Header></Header>
        <Banner :bannerList="bannerList"></Banner>
        <div class="course-detail-content">
            <div class="hezuonr">
                <div class="ts-title">
                    <p>期待您的加入</p>
                    <span></span>
                </div>
                <div class="jianzhi">
                    <div class="jzitem" v-for="(item,index) in jzList" :key="index">
                        <img :src="item.src" alt="">
                        <p>{{ item.title }}</p>
                        <span>{{ item.desc }}</span>
                    </div>
                </div>
            </div>
            <div class="course-system">
                <div class="ts-title1">
                    <p>点猫科技校园标准课程体系</p>
                    <span></span>
                    <b>结合 PBL项目驱动法、游戏化教学法和多维度考核方式服务教学</b>
                </div>
                <div class="tabslist">
                    <div class="tabsitem" v-for="(item,index) in tabList" :key="index" @click="handleTabClick(item, index)">
                        <img :src="currentIndex === index ? item.activeSrc : item.src" alt="">
                        <p>{{ item.title }}</p>
                        <img v-if="currentIndex === index" class="sanjiao" src="@/assets/images/sanjiao.png" alt="">
                    </div>
                </div>
            </div>
            <div class="guihua" v-if="!isProcess">
                <div class="gh-item1">
                    <p class="title">图形化标准教程系列</p>
                    <div class="tixing">
                        <p class="lv1">LV1</p>
                        <p class="lv2">LV2</p>
                        <p class="lv3">LV3</p>
                    </div>
                    <span class="desc">适用于小学至初中的图形化编程学习</span>
                </div>
                <div class="gh-item2">
                    <p class="title">Python标准教程系列</p>
                    <div class="tixing">
                        <p class="lv1">LV1</p>
                        <p class="lv2">LV2</p>
                        <p class="lv3">LV3</p>
                    </div>
                    <span class="desc">适用于小学高年级至高中的Python编程学习</span>
                </div>
                <div class="gh-item3">
                    <p class="title">Python标准教程高阶系列</p>
                    <div class="tixing">
                        <p class="lv1">LV1</p>
                        <p class="lv2">LV2</p>
                        <p class="lv3">LV3</p>
                    </div>
                    <span class="desc">适用于初中高年级至高中的高阶Python编程学习</span>
                </div>
            </div>
            <div class="process" v-if="isProcess">
                <div class="lc-item">
                    <div class="num" style="margin-bottom: 23px;">
                        <p>01</p>
                        <span>情景导入</span>
                    </div>
                    <img src="../../assets/images/process01.png" alt="">
                </div>
                <img class="liucheng" src="../../assets/images/liucheng01.png" alt="">
                <div class="lc-item">
                    <img src="../../assets/images/process02.png" alt="">
                    <div class="num" style="margin-top: 23px;">
                        <p>02</p>
                        <span>明确任务</span>
                    </div>
                </div>
                <img class="liucheng" src="../../assets/images/liucheng.png" alt="">
                <div class="lc-item">
                    <div class="num" style="margin-bottom: 23px;">
                        <p>03</p>
                        <span>作品示例</span>
                    </div>
                    <img src="../../assets/images/process03.png" alt="">
                </div>
                <img class="liucheng" src="../../assets/images/liucheng01.png" alt="">
                <div class="lc-item">
                    <img src="../../assets/images/process04.png" alt="">
                    <div class="num" style="margin-top: 23px;">
                        <p>04</p>
                        <span>动手编程</span>
                    </div>
                </div>
                <img class="liucheng" src="../../assets/images/liucheng.png" alt="">
                <div class="lc-item">
                    <div class="num" style="margin-bottom: 23px;">
                        <p>05</p>
                        <span>成果分享</span>
                    </div>
                    <img src="../../assets/images/process05.png" alt="">
                </div>
            </div>
            <div class="lianxi">
                <div class="ts-title1">
                    <p>合作联系方式</p>
                    <span></span>
                    <b>以专业铸就品质，以合作赢得未来！</b>
                </div>
                <div class="lianxi-box">
                    <div class="lianxi-item">
                        <img src="../../assets/icons/hezuo01.png" alt="">
                        <p>联系人</p>
                        <span>AI教学平台顾问</span>
                    </div>
                    <div class="lianxi-item">
                        <img src="../../assets/icons/hezuo02.png" alt="">
                        <p>联系方式</p>
                        <span>13512345678</span>
                    </div>
                    <div class="lianxi-item">
                        <img src="../../assets/icons/hezuo03.png" alt="">
                        <p>微信</p>
                        <span>13512345678</span>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
        <Services></Services>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Banner from "../../components/Banner.vue";
import Footer from "../../components/Footer.vue";
import Services from "../../components/Services.vue";
export default {
    name: "CourseDetail",
    components: { Header, Banner, Footer, Services},
    data() {
        return {
            jzList: [
                {
                    src: require("../../assets/icons/tisheng01.png"),
                    title: "教材编写",
                    desc: "地方性信息技术课程教材 合作开发编写"
                },
                {
                    src: require("../../assets/icons/tisheng02.png"),
                    title: "师资培训",
                    desc: "地方性信息技术教师培训、 人才实训"
                },
                {
                    src: require("../../assets/icons/tisheng03.png"),
                    title: "校本课程",
                    desc: "试点校中小学编程教育校本 课程建设"
                },
                {
                    src: require("../../assets/icons/tisheng04.png"),
                    title: "AI双师服务",
                    desc: "AI双师编程教学服务"
                }
            ],
            tabList: [
                {
                    type: 'course',
                    src: require("../../assets/images/txicon01.png"),
                    activeSrc: require("../../assets/images/txicon01-1.png"),
                    title: "课程规划",
                    actived: false
                },
                {
                    type: 'process',
                    src: require("../../assets/images/txicon02.png"),
                    activeSrc : require("../../assets/images/txicon02-1.png"),
                    title: "教学流程",
                    actived: false
                }
            ],
            bannerList: [
                {
                    url: require("@/assets/banner3.png")
                },
                {
                    url: require("@/assets/banner2.png")
                }
            ],
            currentIndex: 0,
            isProcess: false
        }
    },
    methods: {
        handleTabClick(item, index) {
            this.currentIndex = index;
            if (item.type === 'process'){
                this.isProcess = true;
            } else if(item.type === 'course'){
                this.isProcess = false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.course-detail-content{
    .ts-title{
        margin-bottom: 50px;
        p{
            font-weight: 500;
            font-size: 32px;
            color: #1D2129;
        }
        span{
            display: block;
            width: 70px;
            height: 6px;
            background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
            border-radius: 7px;
            margin: 0 auto;
        }
    }
    .ts-title1{
        padding-top: 65px;
        margin-bottom: 50px;
        p{
            font-weight: 500;
            font-size: 32px;
            color: #FFFFFF;
        }
        span{
            width: 65px;
            height: 4px;
            background: #FFFFFF;
            border-radius: 3px;
            margin: 0 auto 20px auto;
            display: block;
        }
        b{
            font-weight: 400;
            font-size: 15px;
            color: #FFFFFF;
        }
    }
    .hezuonr{
        max-width: 1200px;
        margin: 70px auto 100px auto;
        .jianzhi{
            display: flex;
            justify-content: space-between;
            .jzitem{
                img{
                    width: 84px;
                    height: 84px;
                    margin-bottom: 36px;
                }
                p{
                    font-weight: 500;
                    font-size: 20px;
                    color: #000000;
                }
                span{
                    font-weight: 400;
                    font-size: 14px;
                    color: #787878;
                }
            }
        }
    }
    .course-system{
        width: 100%;
        height: 374px;
        background: url('../../assets/images/tixibg.png') no-repeat center;
        background-size: 100% 100%;
        .tabslist{
            max-width: 650px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
             .tabsitem{
                img{
                    width: 66px;
                    height: 66px;
                    margin-bottom: 10px;
                }
                p{
                    font-weight: 500;
                    font-size: 17px;
                    color: #FFFFFF;
                    margin-bottom: 12px;
                }
                .sanjiao{
                    width: 44px;
                    height: 19px;
                }
             }
        }
    }
    .guihua{
        max-width: 1200px;
        margin: 70px auto;
        display: flex;
        justify-content: space-between;
        .gh-item1{
            .title{
                width: 370px;
                height: 54px;
                line-height: 54px;
                border-radius: 8px;
                border: 1px solid #00D88A;
                font-weight: 400;
                font-size: 20px;
                color: #38D490;
            }
            .tixing{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .lv1{
                    width: 108px;
                    height: 108px;
                    background: url('@/assets/images/green-1.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
                .lv2{
                    width: 108px;
                    height: 148px;
                    background: url('@/assets/images/green-2.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
                .lv3{
                    width: 108px;
                    height: 200px;
                    background: url('@/assets/images/green-3.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
            }
            .desc{
                width: 370px;
                height: 54px;
                line-height: 54px;
                background: #F7F7F7;
                border-radius: 8px;
                font-weight: 400;
                font-size: 15px;
                color: #787878;
                display: block;
            }
        }
        .gh-item2{
            .title{
                width: 370px;
                height: 54px;
                line-height: 54px;
                border-radius: 8px;
                border: 1px solid #FE7519;
                font-weight: 400;
                font-size: 20px;
                color: #FE7519;
            }
            .tixing{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .lv1{
                    width: 108px;
                    height: 108px;
                    background: url('@/assets/images/orange-1.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
                .lv2{
                    width: 108px;
                    height: 148px;
                    background: url('@/assets/images/orange-2.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
                .lv3{
                    width: 108px;
                    height: 200px;
                    background: url('@/assets/images/orange-3.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
            }
            .desc{
                width: 370px;
                height: 54px;
                line-height: 54px;
                background: #F7F7F7;
                border-radius: 8px;
                font-weight: 400;
                font-size: 15px;
                color: #787878;
                display: block;
            }
        }
        .gh-item3{
            .title{
                width: 370px;
                height: 54px;
                line-height: 54px;
                border-radius: 8px;
                border: 1px solid #317AF7;
                font-weight: 400;
                font-size: 20px;
                color: #317AF7;
            }
            .tixing{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .lv1{
                    width: 108px;
                    height: 108px;
                    background: url('@/assets/images/blue-1.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
                .lv2{
                    width: 108px;
                    height: 148px;
                    background: url('@/assets/images/blue-2.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
                .lv3{
                    width: 108px;
                    height: 200px;
                    background: url('@/assets/images/blue-3.png') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    color: #FFFFFF;
                }
            }
            .desc{
                width: 370px;
                height: 54px;
                line-height: 54px;
                background: #F7F7F7;
                border-radius: 8px;
                font-weight: 400;
                font-size: 15px;
                color: #787878;
                display: block;
            }
        }
    }
    .process{
        max-width: 1200px;
        margin: 70px auto;
        display: flex;
        justify-content: space-between;
        .lc-item{
            .num{
                width: 170px;
                height: 128px;
                background: #4088F9;
                p{
                    font-weight: 500;
                    font-size: 60px;
                    color: #FFFFFF;
                    margin-bottom: 0px;
                }
                span{
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                    display: block;
                }
            }
            img{
                width: 169px;
                height: 127px;
            }
        }
        .liucheng{
            width: 73px;
            height: 160px;
            margin-top: 60px;
        }
    }
    .lianxi{
        width: 100%;
        // height: 414px;
        background: #3881F8;
        padding-bottom: 65px;
        .lianxi-box{
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .lianxi-item{
                img{
                    width: 66px;
                    height: 66px;
                    margin-bottom: 20px;
                }
                p{
                    font-weight: 500;
                    font-size: 17px;
                    color: #FFFFFF;
                }
                span{
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                    display: block;
                }
            }
        }
    }
}
</style>